import React, { useState } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from "redux"
import { MyState, TITLEITEM } from "../../type/router.d"
import * as actions from "../../store/modules/action"
import "./Detail.scss"
import Item from 'antd/lib/list/Item'
import { HeartOutlined, MessageOutlined, ShareAltOutlined } from "@ant-design/icons"
import { Anchor, Affix, BackTop } from 'antd';
const { Link } = Anchor;
interface PROPS {
    detailArr: TITLEITEM[],
    detaactArr: any
}
export const Detail = (props: PROPS) => {
    const [top, setTop] = useState(10);
    const [container, setContainer] = useState<HTMLDivElement | null>(null);
    const getCurrentAnchor = () => '#components-anchor-demo-static';
    return (
        // <div>
        <div className="main">
            <div className='nav'>
                <li><HeartOutlined /></li>
                <li><MessageOutlined /></li>
                <li><ShareAltOutlined /></li>
            </div>
            <div className="left">
                {props.detaactArr.length ? props.detaactArr.map((item: any, index: number) => {
                    return <div key={index}>
                        <img className='img' src={item.cover} alt="" />
                        <div className='titlebox'>
                            <div className='titlebox1'>
                                <h1 className='h1'> <b>{item.title}</b> </h1>
                                <p className='p1'>发布于{item.date}{item.time}阅读量为{item.count}</p>
                            </div>
                        </div>
                        <div className='conbox'>
                            <div dangerouslySetInnerHTML={{ __html: item.html }}></div>
                            <div dangerouslySetInnerHTML={{ __html: item.content }}></div>
                        </div>
                    </div>
                }) : "暂无数据"}
            </div>
            <div className="rightdetail">
                <div>
                    <div className="rightActa">
                        <h3>目录</h3>
                        <Anchor>
                            <Link href="#欢迎使用-wipi-markdown-编辑器" title="Basic demo" />
                            <Link href="#components-anchor-demo-static" title="Static demo" />
                            <Link href="#API" title="API">
                                <Link href="#Anchor-Props" title="Anchor Props" />
                                <Link href="#Link-Props" title="Link Props" />
                            </Link>
                        </Anchor>
                    </div>
                </div>

            </div>
            <>
                <BackTop />
            </>
        </div>
    )
}

const mapStateToProps = (state: MyState) => ({
    detailArr: state.detailArr,
    detaactArr: state.detaactArr
})

const mapDispatchToProps = (dispatch: Dispatch) => {
    return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Detail)